<template>
  <div style="background-color: white;height: 100%">
    <a-col :span="24" style="background-color: white;height: 5%;margin-bottom: 5px;text-align: center;">
        <h3 style="font-size: 18px;padding-top: 15px;">{{ formBean?.formName + '-新增' }}</h3>
    </a-col>

    <div style="margin: 15px;" >
      <a-spin :spinning="this.formLoading">
        <div style="background-color: white;height: 100%;">
          <div style="margin-left: 7px;padding: 5px;" v-for="(viewItem,index1) in this.formBean.viewBean?.viewItemList">
            <div v-if="viewItem.showType === showType.mainTable">
              <a-divider orientation="left" orientation-margin="0px">
                <a-tag color="#2db7f5">{{ viewItem.refObj.name }}</a-tag>
              </a-divider>
              <table style="width: 100%;table-layout: fixed">
                <tr v-for="(item,lineNum) in viewItem.refObj.line">
                  <td v-for="(element,rowNum) in viewItem.refObj.row"
                      :id="this.getTableColId(viewItem,lineNum,rowNum)"
                      style="border: 1px solid rgba(218,216,216,0.75);height: 55px;">
                    <run-field v-if="viewItem.showType === showType.mainTable"
                               :fieldDataType=this.getBindData(viewItem,lineNum,rowNum).fieldDataType
                               :fieldName=this.getBindData(viewItem,lineNum,rowNum).fieldName
                               v-model:inputValue=this.getBindData(viewItem,lineNum,rowNum).value
                    ></run-field>
                  </td>
                </tr>
              </table>
            </div>
            <run-field v-if="viewItem.showType === showType.field"
                       :fieldDataType=this.formBean.fieldMap[viewItem.refObj.id].fieldDataType
                       :fieldName=this.formBean.fieldMap[viewItem.refObj.id].fieldName
                       v-model:inputValue=this.formBean.fieldMap[viewItem.refObj.id].value
            />
          </div>
        </div>
      </a-spin>
    </div>
    <a-col :span="24" style="background-color: white;height: 5%;margin-bottom: 5px;margin-left: 25px;">
      <a-button type="primary" @click="saveOrUpdate">保存</a-button>
      <a-button>取消</a-button>
    </a-col>
  </div>
</template>

<script>

import {AppFormRunApi} from "@/components/home/lowCode/formRun/js/AppFormRunApi";
import {message} from "ant-design-vue";
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import RunField from "@/components/home/lowCode/formRun/RunField";
import {ref} from "vue";

dayjs.locale('zh-cn');
dayjs().format('YYYY-MM-DD HH:mm:ss');

const showType = {
  field: 'field', mainTable: 'mainTable'
}

export default {
  name: "AppFormNew",
  components: {
    RunField,
  },
  data() {
    let formBean = ref({
      "id":"b5c060420d424cf08f7b5cb62a4171b9",
      "formName":"测试输入数据",
      "appId":"cfdc2edd8dd340de85b5b9655e706435",
      "fieldIndex":3,
      mainTableBean:{
        "id":"09b4979ac0594de59677b13d81b530d5",
        "formId":"b5c060420d424cf08f7b5cb62a4171b9",
        "tableName":"formman_00038",
        "dbTableName":"formman_00038",
        "fieldList":[
          {
            "id":"1a848b3867964fdbac5ca63fa5e25f73",
            "formId":null,
            "tableId":"09b4979ac0594de59677b13d81b530d5",
            "fieldName":"输入框",
            "dbFieldName":"field00001",
            "fieldDataType":"text",
            "fieldLength":null,
            "width":60,
            "scale":null,
            "dbFieldDataType":"varchar",
            "delete":false,
            "sortIndex":null
          },
          {
            "id":"0bcd0b9c3b2d46b7a41a065fd682db41",
            "formId":null,
            "tableId":"09b4979ac0594de59677b13d81b530d5",
            "fieldName":"输入框",
            "dbFieldName":"field00002",
            "fieldDataType":"text",
            "fieldLength":null,
            "width":60,
            "scale":null,
            "dbFieldDataType":"varchar",
            "delete":false,
            "sortIndex":null
          }
        ]
      },
      "sonTableList":[

      ],
      "viewList":[
        {
          "id":"d6ad4dce1be049d28c81ab978de90bc5",
          "viewName":"视图1",
          "formId":"b5c060420d424cf08f7b5cb62a4171b9",
          "fieldBind":{
            "tab_9q3c64_0_0":"1a848b3867964fdbac5ca63fa5e25f73"
          },
          "viewItemList":[
            {
              "id":"2a68398aadf04b5ba9708b3d862ccea0",
              "showType":"mainTable",
              "refObj":{
                "line":3,
                "name":"表格布局",
                "id":"9q3c64",
                "row":3
              },
              "sortId":0
            },
            {
              "id":"fc81fff06c2b4b1697dc1dea9a8a8b8b",
              "showType":"field",
              "refObj":{
                "line":null,
                "id":"0bcd0b9c3b2d46b7a41a065fd682db41",
                "row":null
              },
              "sortId":1
            }
          ]
        }
      ],
      "viewBean":{
        "id":"d6ad4dce1be049d28c81ab978de90bc5",
        "viewName":"视图1",
        "formId":"b5c060420d424cf08f7b5cb62a4171b9",
        "viewItemList":[
          {
            "id":"2a68398aadf04b5ba9708b3d862ccea0",
            "showType":"mainTable",
            "refObj":{
              "line":3,
              "name":"表格布局",
              "id":"9q3c64",
              "row":3
            },
            "sortId":0
          },
          {
            "id":"fc81fff06c2b4b1697dc1dea9a8a8b8b",
            "showType":"field",
            "refObj":{
              "line":null,
              "id":"field00001",
              "row":null
            },
            "sortId":1
          }
        ]
      },
      "formAuthList":null,
      fieldMap:{
        "field00002":{
          "id":"0bcd0b9c3b2d46b7a41a065fd682db41",
          "tableId":"09b4979ac0594de59677b13d81b530d5",
          "fieldName":"输入框",
          "dbFieldName":"field00002",
          "fieldDataType":"text",
          "dbFieldDataType":"varchar",
        },
        "field00001":{
          "id":"1a848b3867964fdbac5ca63fa5e25f73",
          "tableId":"09b4979ac0594de59677b13d81b530d5",
          "fieldName":"输入框",
          "dbFieldName":"field00001",
          "fieldDataType":"text",
          "fieldLength":null,
          "width":60,
          "scale":null,
          "dbFieldDataType":"varchar",
          "delete":false,
          "sortIndex":null
        }
      },
      "currentInfo":{
        "currentViewId":"d6ad4dce1be049d28c81ab978de90bc5"
      }
    });
    return {
      showType,
      value: dayjs('2015-01-01', 'YYYY-MM-DD HH:mm:ss'),
      dayjs,
      locale,
      formLoading: false,
      formId: '',
      formBean ,
    }
  },
  created() {
    this.formId = this.$route.query.formId;
    this.loadFormBean();
  },
  methods: {
    getTableColId(viewItem, lineNum, rowNum) {
      return 'tab' + viewItem.refObj.id + '_line' + lineNum + '_row' + rowNum;
    },
    getCurrentViewData() {
      return this.formBean.viewBean;
    },
    /**
     * 获取视图绑定的字段信息
     *
     * @param viewItem
     * @param lineNum
     * @param rowNum
     * @returns {{}}
     */
    getBindData: function (viewItem, lineNum, rowNum) {
      let fieldData = {};
      if (viewItem.showType === showType.field) {
        fieldData = this.formBean.fieldMap[viewItem.refObj.id];
      } else if (viewItem.showType === showType.mainTable) {
        if (viewItem && viewItem.refObj && viewItem.refObj.tableContent) {
          let dbFieName = viewItem.refObj.tableContent[this.getTableColId(viewItem, lineNum, rowNum)];
          fieldData = this.formBean.fieldMap[dbFieName];
        }
      }
      return fieldData ? fieldData: {};
    },
    loadFormBean() {
      this.formLoading = true;
      AppFormRunApi.createOrEdit({formId: this.formId}).then((data) => {
        this.formBean = data;
        this.formLoading = false;
      })
    },
    saveOrUpdate() {
      this.formLoading = true;
      let formData = [];
      for(let key in this.formBean.fieldMap){
        formData.push(this.formBean.fieldMap[key])
      }
      AppFormRunApi.saveOrUpdate({
        formId: this.formId,
        fieldValue: formData
      }).then((data) => {
        message.info("保存完成");
        this.loadFormBean();
        this.formLoading = false;
      })
    },
    onChange(value, dateString) {

    }
  }
}
</script>

<style scoped>

</style>
